<template>
	<view class="pages-card" v-if="info&&info.sn">
		<view class="order-item-top row-box pb-20">
			<view class="user-info-box flex align-items-center ">
				<image class="avatar mr-20" v-if="info.user_info" :src="info.user_info.avatar" mode="scaleToFill">
				</image>
				<view class="user-info" v-if="info.user_info">
					<view class="nickname fc-0 out-1">
						{{info.user_info.nickname}}
					</view>
					<view class="user-name flex align-items-center">
						<view class="mr-10 name out-1">{{info.address.contact}}</view>
						<view>{{info.address.mobile}}</view>
					</view>
				</view>
			</view>
			<view class="flex align-items-center justify-content-end pr-30">
				<view class="iconfont p-20" @click="makeCall">
					&#xe65f;
				</view>
				<view class="iconfont p-20 " @click="sendChat">
					&#xe631;
				</view>
			</view>
			<image class="order-item-top-img" :src="`/static/images/order/co-type-${info.order_goods_type}.png`"
				mode="scaleToFill"></image>
		</view>

		<view class="order-item-center pt-20 pb-20" @click="onDetails">
			<view class="row-box">
				<view class="fs-sm">
					订单编号:{{info.sn}}
				</view>
				<view class="flex align-items-center">
					<view class=" fs-sm tag tag-green" v-if="info.order_goods_type==2">
						到店自提
					</view>
					<view class=" fs-sm tag tag-green" v-if="info.order_goods_type==3">
						到店使用
					</view>
					<view class=" fs-sm tag tag-red">
						{{statusList[info.order_status]}}
					</view>
				</view>
			</view>
			<view class="goods-list">

				<view class="row-box goods-item mt-20 mb-20  " v-for="(item,index) in info.goods_info" :key="index"
					style="height: 100%;">
					<image class="goods-img mr-20" :src="item.goods_image" mode="scaleToFill"></image>
					<view class="row-box  flex-1">
						<view class="info-box " style="height: 130rpx;">
							<view class="fs-lg fc-0 fw-6">
								{{item.goods_name}}
							</view>
							<!-- <view class="fs-sm">
								{{item.local_life_no_date}}
							</view> -->
							<view class="fs-sm" v-if="item.is_check_date=='永久'">
								到期时间:{{item.is_check_date}}
							</view>
							<view class="fs-sm" v-if="item.is_check_date=='2'">
								到期时间:{{item.check_date_num }}天
							</view>
							<view class="fs-sm" v-if="item.is_check_date=='3'">
								到期时间:{{item.check_end_date }}
							</view>
						</view>
						<view class="price-box">
							<view class="fc-ac">
								￥{{item.goods_price}}
							</view>
							<view class="fc-0 fs-sm">
								×{{item.goods_num}}
							</view>
						</view>
					</view>
				</view>

				<view class="row-box mt-10">
					<view class="fs-sm">
						支付时间:<text>{{info.pay_time}}</text>
					</view>
					<view class="flex align-items-center">
						<view class="">
							共 <text class="fc-warn">{{info.total_num}}</text> 件
						</view>
						<view class="ml-20">
							合计 <text class="fc-ac fs-lg fw-6">￥{{info.total_amount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="order-item-bottom pt-20 flex align-items-center justify-content-end">
			<view class="btn-info-sm ml-10" @click="inStore">
				已到店
			</view>
			<view class="btn-info-green-sm ml-10" @click="onUse">
				提醒使用
			</view>
			<view class="btn-info-green-sm ml-10" @click="verification">
				核销
			</view>
			<view class="btn-info-green-sm ml-10" @click="storeVerification">
				到店核销
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单状态;0-待付款;1-待发货;2-待收货;3-已完成;4-已关闭;5-部分发货;6-待提货;7-部分提货;8-待使用;9-退款中;10-已退款;11-部分退款
				statusList: [
					'待付款', "待发货", "待自提/待核销", "已完成", "已关闭", "部分发货", "待提货", "部分提货", "待使用", "退款中", "已退款", "部分退款"
				]
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return null
				}
			}
		},
		watch: {
			info(newVal) {
				this.info = newVal;

			}
		},
		created() {
			if (this.info.order_goods_type == 2) {
				this.statusList = [
					'待付款', "待发货", "待自提", "已完成", "已关闭", "部分发货", "待提货", "部分提货", "待使用", "退款中", "已退款", "部分退款"
				]
			}
			if (this.info.order_goods_type == 3) {
				this.statusList = [
					'待付款', "待发货", "待核销", "已完成", "已关闭", "部分发货", "待提货", "部分提货", "待使用", "退款中", "已退款", "部分退款"
				]
			}
		},
		methods: {
			// 去详情页面
			onDetails() {
				this.$emit('onDetails')
			},
			// 拨打电话
			makeCall() {
				const url = `tel:${this.info.address.mobile}`
				window.location.href = url
			},
			// 发起聊天
			sendChat() {
				this.$emit('sendChat', this.info.user_info.external_userid)
			},
			// 核销
			verification() {
				this.$emit('verification')
			},
			// 提醒使用
			onUse() {
				this.$emit('onUse')
			},
			// 到店核销
			storeVerification() {
				this.$emit('storeVerification')
			},
			// 已到店
			inStore() {
				this.$emit('inStore')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		margin: 0 4rpx;
	}

	.tag-green {
		color: #00A191;
		background-color: #E8FFFC;
	}

	.tag-orange {
		color: #D49B07;
		background-color: #FFF6E9;
	}

	.tag-red {
		color: #EE3227;
		background-color: #FFEEED;
	}

	.tag-blue {
		color: #257DFF;
		background-color: #EAF6FF;
	}

	.pages-card {
		margin: 0 auto 20rpx;
	}

	.order-item-top {
		position: relative;
		border-bottom: 1rpx solid #ededeb;

		.order-item-top-img {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			z-index: 1;
			top: -30rpx;
			right: -30rpx;
		}

		.nickname {
			width: 340rpx;
		}

		.name {
			max-width: 140rpx;
		}


		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
		}
	}

	.order-item-center {
		.goods-item-info {
			justify-content: flex-start;

		}

		.goods-img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-direction: 0;
		}

		.price-box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
		}
	}

	.order-item-bottom {
		border-top: 1rpx solid #ededeb;
	}
</style>